<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传测试</title>
    <link rel="stylesheet" href="/file-upload/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <script src="/file-upload/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/file-upload/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
文件路径：<input type="text" name="file_url" id="file_url" readonly="readonly" style="width: 500px"/>
<button onclick="openSelectFileWindow()">+</button>
<br>
<input id="file" name="file" type="file" onchange="uploadFile()" style="display: none"/>
<div id="image"></div>
</body>
<script>
    function openSelectFileWindow() {
        $("#file").click();
    }

    function uploadFile() {
        var formData = new FormData();
        var files = document.getElementById("file").files;
        formData.append("file", files[0]);
        $.ajax({
            url: "/file-upload/test/upload",
            data: formData,
            type: "post",
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (res) {
                console.log(res);
                if (res.code == 200) {
                    var url = '/file-upload/' + res.data;
                    $("#file_url").val(res.data);
                    var img = "<img src='" + url + "'/>";
                    $("#image").append(img);
                }else {
                    alert(res.msg);
                }


            }
        })
    }
</script>
</html>